<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阔选框</title>


<style>
    body {
        padding: 100px;
    }

    .fileDiv {
        float: left;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        font-size: 12px;
        border: 1px solid #ccc;
        margin-right: 5px;
        margin-bottom: 10px;
    }
    .fileDiv2 {
        float: left;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        font-size: 12px;
        border: 1px solid #ccc;
        margin-right: 5px;
        margin-bottom: 10px;
    }

    .seled {
        border: 1px solid red;
        background-color: #D6DFF7;
    }
</style>
<script src="resource/js/jquery.js"></script>
</head>


<body id="thisBody">
  

<button onclick="getChooseDiv()">获取选中的div</button>


<div id="optAreaDiv" style="width: 1000px;height: 300px;border: 2px solid yellow;">

    <div>

        <div class="fileDiv2">张无忌</div>

        <div class="fileDiv">file1</div>
          
        <div class="fileDiv">file2</div>
          
        <div class="fileDiv">file3</div>
          
        <div class="fileDiv">file4</div>
          
        <div class="fileDiv">file5</div>
          
        <div class="fileDiv">file6</div>

    </div>

    <!--清楚浮动-->
    <div style="clear: both"></div>

    <div>

        <div class="fileDiv2">杨不悔</div>

        <div class="fileDiv">file1</div>
          
        <div class="fileDiv">file2</div>
          
        <div class="fileDiv">file3</div>
          
        <div class="fileDiv">file4</div>
          
        <div class="fileDiv">file5</div>
          
        <div class="fileDiv">file6</div>

    </div>


</div>
</body>



<script type="text/javascript">
    //这里要获取X轴滚动条位置
    function getPageScroll() {
        var x ;
        if (window.pageYOffset) {    // all except IE
            x = window.pageXOffset;
        } else if (document.documentElement && document.documentElement.scrollLeft) {    // IE 6 Strict
            x = document.documentElement.scrollLeft;
        } else if (document.body) {    // all other IE
            x = document.body.scrollLeft;
        }
        return x;
    }
    //这里要获取Y轴滚动条位置
    function getPageScrollY() {
        var  y;
        if (window.pageYOffset) {    // all except IE
            y = window.pageYOffset;
        } else if (document.documentElement && document.documentElement.scrollTop) {    // IE 6 Strict
            y = document.documentElement.scrollTop;
        } else if (document.body) {    // all other IE
            y = document.body.scrollTop;
        }
        return y;
    }

    //获取
    function getChooseDiv() {
        var count = 0;
        var selInfo = "";
        var fileNodes = document.getElementsByClassName("fileDiv");
        for (var i = 0; i < fileNodes.length; i++) {
            if (fileNodes[i].className.indexOf("seled") != -1) {
                count++;
                selInfo += fileNodes[i].innerHTML + "\n";
            }
        }
        console.log("共选择 " + count + " 个div，分别是：\n" + selInfo);
    }

    $(function () {
        $("[class='fileDiv']").on("click", function () {
            var  evt = window.event || arguments[0];
            clearEventBubble(evt);
            var thisClass = $(this).attr("class");
            if (thisClass.indexOf("seled") != -1) {//选中了
                $(this).removeClass("seled");
            } else {
                $(this).addClass("seled");
            }
        });
    });

    (function () {

        //点击选框区域以外的，清除选中的信息
        document.getElementById("thisBody").onclick = function (e) {
            //这个点击body的事件不可轻易开启，有bug
            //var dom = document.getElementsByClassName("seled");
            //$(dom).removeClass("seled");
        };

        //指定范围内 onmousedown , (  document 是 对整个页面)
        var optAreaDiv = document.getElementById("optAreaDiv");
        optAreaDiv.onmousedown = function () {
            var evt = window.event || arguments[0];
            if(evt.button != 0){//只让 数遍左键 起作用 0 左 1 中 2 右
                return;
            }


            var selList = [];
            var fileNodes = document.getElementsByClassName("fileDiv");
            for (var i = 0; i < fileNodes.length; i++) {
                if (fileNodes[i].className.indexOf("fileDiv") != -1) {
                    fileNodes[i].className = "fileDiv";
                    selList.push(fileNodes[i]);
                }
            }

            var isSelect = true;
            var pageScroll =  parseInt(getPageScroll());
            var pageScrollY  =  parseInt(getPageScrollY());
            var startX = (evt.x || evt.clientX) + parseInt(pageScroll);
            var startY = (evt.y || evt.clientY)+ parseInt(pageScrollY);
            var selDiv = document.createElement("div");
            selDiv.style.cssText = "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;";
            selDiv.id = "selectDiv";
            document.body.appendChild(selDiv);

            selDiv.style.left = startX + "px";
            selDiv.style.top = startY + "px";

            var _x = null;
            var _y = null;
            clearEventBubble(evt);

            optAreaDiv.onmousemove = function() {
                evt = window.event || arguments[0];
                if (isSelect) {
                    if (selDiv.style.display == "none") {
                        selDiv.style.display = "";
                    }
                    _x = (evt.x || evt.clientX)+pageScroll;
                    _y = (evt.y || evt.clientY)+pageScrollY;
                    selDiv.style.left = Math.min(_x, startX) + "px";
                    selDiv.style.top = Math.min(_y, startY) + "px";
                    selDiv.style.width = Math.abs(_x - startX) + "px";
                    selDiv.style.height = Math.abs(_y - startY) + "px";

                    // ---------------- 关键算法 --------------------- 
                    var _l = selDiv.offsetLeft, _t = selDiv.offsetTop;
                    var _w = selDiv.offsetWidth, _h = selDiv.offsetHeight;
                    for (var i = 0; i < selList.length; i++) {
                        var sl = selList[i].offsetWidth + selList[i].offsetLeft;
                        var st = selList[i].offsetHeight + selList[i].offsetTop;
                        if (sl > _l && st > _t && selList[i].offsetLeft < _l + _w && selList[i].offsetTop < _t + _h) {
                            if (selList[i].className.indexOf("seled") == -1) {
                                selList[i].className = selList[i].className + " seled";
                            }
                        } else {
                            if (selList[i].className.indexOf("seled") != -1) {
                                selList[i].className = "fileDiv";
                            }
                        }
                    }

                }
                clearEventBubble(evt);
            }

            document.onmouseup = function () {
                isSelect = false;
                if (selDiv) {
                    document.body.removeChild(selDiv);
                    //showSelDiv(selList);
                }
                selList = null, _x = null, _y = null, selDiv = null, startX = null, startY = null, evt = null;
            }
        }
    })();

    function clearEventBubble(evt) {
        if (evt.stopPropagation)
            evt.stopPropagation();
        else
            evt.cancelBubble = true;
        if (evt.preventDefault)
            evt.preventDefault();
        else
            evt.returnValue = false;
    }

    function showSelDiv(arr) {
        var count = 0;
        var selInfo = "";
        for (var i = 0; i < arr.length; i++) {
            if (arr[i].className.indexOf("seled") != -1) {
                count++;
                selInfo += arr[i].innerHTML + "\n";
            }
        }
        console.log("共选择 " + count + " 个文件，分别是：\n" + selInfo);
        console.log(" 暂时没有算是点击选中的 ");

    }
</script>

</html>